<template>
  <div id="app">
    <!-- top -->
    <el-col :span="24" class="b-s-t">
      <el-col :span="8" class="b-s-t-left">
        <div class="t-tab-bar">
          <div
            v-for="(item,index) in tabList"
            class="bar-item"
            :key="index"
            :class="index == tabIndex ? 'bar-item-hover': ''"
            @click="clickTabItem(index,item)"
          >{{item.text}}</div>
        </div>
      </el-col>
      <el-col :span="8" class="b-s-t-l">
        <div class="t-title">广州市白云区均禾街平沙智慧社区</div>
      </el-col>
      <el-col :span="8" class="b-s-t-r">
        <div class="t-time">{{currentTime}}</div>
      </el-col>
      <el-col :span="24" class="background"></el-col>
    </el-col>

    <el-col :span="24" style="height:90%">
      <router-view />
    </el-col>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timer: "", //定义一个定时器的变量
      currentTime: "", // 获取当前时间
      weeks: ["日", "一", "二", "三", "四", "五", "六"], //遍历周
      getWeek: "", //当前周
      tabIndex: localStorage.getItem("tabIndex") || 0, //点前点击导航
      // 导航栏数据
      tabList: [
        { id: 0, text: "总体态势", path: "Home" },
        { id: 1, text: "人口统计", path: "rkMap" },
        { id: 2, text: "车辆情况", path: "clMap" },
        { id: 3, text: "公共服务", path: "fwMap" },
        { id: 4, text: "物业管理", path: "wyMap" }
      ]
    };
  },
  created() {
    this.tabIndex = localStorage.getItem("tabIndex") || 0;
    // var now = new Date();
    // this.getWeek = "星期" + this.weeks[now.getDay()];
    var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(function() {
      _this.currentTime = //修改数据date
        new Date().getFullYear() +
        "年" +
        (new Date().getMonth() + 1) +
        "月" +
        new Date().getDate() +
        "号" +
        // " " +
        // _this.getWeek +
        " " +
        (new Date().getHours().toString() < 10
          ? "0" + new Date().getHours().toString()
          : new Date().getHours().toString()) +
        ":" +
        (new Date().getMinutes().toString() < 10
          ? "0" + new Date().getMinutes().toString()
          : new Date().getMinutes().toString()) +
        ":" +
        (new Date().getSeconds().toString() < 10
          ? "0" + new Date().getSeconds().toString()
          : new Date().getSeconds().toString());
    }, 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    // 点击导航栏
    clickTabItem(v, item) {
      this.tabIndex = v;
      localStorage.setItem("tabIndex", v);
      this.$router.push({
        name: item.path
      });
    }
  },
  watch: {
    $route: {
      // val是改变之后的路由，oldVal是改变之前的val,根据路由跳转来控制是全屏还是半屏，全屏--- / 半屏--- Home1
      handler: function(val) {
        if (val.name.indexOf("1") > -1) {
          this.tabList = [
            { id: 0, text: "总体态势", path: "Home1" },
            { id: 1, text: "人口统计", path: "rkMap1" },
            { id: 2, text: "车辆情况", path: "clMap1" },
            { id: 3, text: "公共服务", path: "fwMap1" },
            { id: 4, text: "物业管理", path: "wyMap1" }
          ];
        } else {
          this.tabList = [
            { id: 0, text: "总体态势", path: "Home" },
            { id: 1, text: "人口统计", path: "rkMap" },
            { id: 2, text: "车辆情况", path: "clMap" },
            { id: 3, text: "公共服务", path: "fwMap" },
            { id: 4, text: "物业管理", path: "wyMap" }
          ];
        }
      },
      // 深度观察监听
      deep: true
    }
  }
};
</script>
<style lang="less">
// 去掉滚动条
.el-table__body-wrapper::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background: url("./assets/bg.png") no-repeat 50%;
  background-size: cover;
}
#app {
  height: 100%;
  width: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  font-family: PingFang SC;
}
.BMap_cpyCtrl {
  display: none;
}
.anchorBL {
  display: none !important;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.width {
  width: 100%;
}
.height {
  height: 100%;
}
.box {
  background: #0e1348;
  border: 0.2vw solid #225bc3;
  border-radius: 0.5vw;
}
// top
.b-s-t {
  .flex;
  .width;
  height: 10%;
  padding-top: 1.5%;
  background: linear-gradient(0deg, #3478ff 0%, #02076a 97%);
  overflow: hidden;

  .background {
    position: fixed;
    top: 0.8%;
    width: 118%;
    height: 10%;
    background: url("./assets/top-bg.png") no-repeat;
    background-size: 100%;
    z-index: 0;
  }

  .b-s-t-left {
    height: 100%;
    .flex;
    background: #000226;
  }

  .b-s-t-r {
    .flex;
    background: #000226;
    height: 100%;
  }

  .b-s-t-l {
    height: 100%;
    z-index: 1;
  }
  .t-title {
    .flex;
    height: 10%;
    font-size: 2.5vw;
    color: #fff;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 62px;
    width: 100%;
    text-shadow: 0px 15px 9px rgb(2 6 50 / 80%);
    letter-spacing: 0.1vw;
    position: fixed;
    top: 1.5vh;
    z-index: 111;
    left: 0;
  }
  .t-time {
    font-size: 1.8vw;
    color: #fff;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 62px;
    width: 100%;
    letter-spacing: 0.2vw;
  }
  .t-tab-bar {
    .flex;
    z-index: 99;
    font-size: 0.9vw;
    .bar-item {
      flex: 1;
      .width;
      font-family: PingFang SC;
      font-weight: bold;
      color: #225bc3;
      border: 0.15vw solid #225bc3;
      margin: 0 0.3vw;
      padding: 0.28vw 0.2vw;
      border-radius: 0.2vw;
      z-index: 99;
    }
    .bar-item-hover {
      flex: 1;
      .width;
      margin: 0 0.3vw;
      padding: 0.28vw 0.2vw;
      border-radius: 0.2vw;
      background: #225bc3;
      font-family: PingFang SC;
      font-weight: bold;
      color: #00033b;
    }
  }
}
</style>
